iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
Modern Web

前端暴龍機,Vue2.x 進化 Vue3系列 第 7

[前端暴龍機,Vue2.x 進化 Vue3 ] Day7. Vue資料的使用方式

  • 分享至 

  • xImage
  •  

Vue資料的使用方式

在前一篇中,我們已經會一些用來表示內容的方式了,但僅僅只是呈現~
所以今天就會來點互動,主要是透過輸入框、下拉選單...等方式來接收使用者的訊息

v-model

v-model 會是一個常用的指令,通常會拿來套用在表單的部份,達到我們前幾篇提到的特性 "雙向綁定"

<input type="text" v-model="data內宣告的變數,用來存取使用者的輸入">

因此,當使用者輸入了新的內容,就可以自動將它儲存

存起來的資料該怎麼去取得使用呢?

既然把值存起來了,那該如何去使用? 如果還不認識的,假設你在 data 內宣告了一個 userInput 透過 v-model 綁定到 input 標籤上,那麼你的直覺可能會是

console.log(userInput);

不過這是錯的@@

在 Vue 裡面要去取得定義的東西(data內的變數 又或是 方法 ....等),記得要在前面加 this,所以如下才是對的

console.log(this.userInput);

下拉選單 與 v-model

在複習的過程中看到,剛好更新一下自己的腦袋/images/emoticon/emoticon25.gif
覺得下拉式選單有些比較特別的地方可以介紹一下

<div id="app">
    請選擇出場戰士
    <select v-model="selected">
        <option disabled value="">請選擇</option>
        <option>丁丁</option>
        <option>拉拉</option>
        <option value="我是在吃寶寶果醬的迪西">迪西</option>
        <option>小波</option>
    </select>
    <div>selected = {{ selected }}</div>
</div>
<script>
var app = new Vue({
  el: '#app',
  data:{
    selected: "",
  }
})
</script>

在下拉選單內 option 如果沒有設定該 value 的值,selected 就只會儲存 option 標籤內的內容,所以範例中,只有迪西會跟大家不一樣~
https://ithelp.ithome.com.tw/upload/images/20210916/20120722AI3BFOVwZn.jpg
https://ithelp.ithome.com.tw/upload/images/20210916/20120722OMYUcq6gES.jpg
可運行範例 Codepen

[注意]
在官方文件有提到一點,v-model 的初始值還沒匹配任何選項 ,<select> 元素會被渲染 未選中狀態
在 iOS 中,會導致用戶無法選擇到第一個選項,因為在這樣的情況下,iOS 是不會觸發 change 的事件
所以會推薦提供一個值為空的禁用選項,如上面範例的第一個 option

<option disabled value="">請選擇</option>

參考資料

Vue 官方文件
Day08 - [Directives] 資料綁定(Data Binding), iT邦幫忙 Syuanhahaha


上一篇
[前端暴龍機,Vue2.x 進化 Vue3 ] Day6. 模板語法
下一篇
[前端暴龍機,Vue2.x 進化 Vue3 ] Day8. v-model 修飾符 -- 省下自己寫 JS 處理的時間
系列文
前端暴龍機,Vue2.x 進化 Vue330
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言